<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:choose>
	<c:when test="${sessionScope.userInfo!=null }">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
		<script type="text/javascript">
	//댓글 보기
	$(document).ready(function(){	
		$("#buyCommentTable").hide();
	var bno="${requestScope.bvo.no }";
	var currentId="${sessionScope.userInfo.id }";
	//alert(currentId);
 	 	$.ajax({
			type:"POST",
			url:"${initParam.root}buyboard.do",
			data:"command=getCommentList&bno="+bno,
			dataType:"json",
			success:function(data){
			var comments="";
			$("#buyCommentTable").show();
				//alert(data.comList.list[0].comment); 페이징빈 적용시
				//alert(data.comList[0].memberVO.id); 한 개의 값만 나옴
			$.each(data.comList,function(index, commentsVO){
			 		//<tr>
			 		var commentId = commentsVO.memberVO.id;
					comments+="<tr><td><b>"+commentsVO.memberVO.id+
							"</b></td><td>"+commentsVO.timePosted+
							"&nbsp;"; /* <img src=img/reply.jpg><a href=>답글</a>"; */
							if(currentId==commentId){
								comments+="<div style='float:right'>";
								/* comments+="<a href=>수정</a> "; */
								comments+="<img src='img/reply_deleteBtn.gif' name='delBuyCommentBtn'>";
								comments+="<input type='hidden' name='no' value='"+commentsVO.no+"'>";
								
								// 문제가 있는 예시 -택스트로 페이지 구성
								//comments+=$("#buyCommentDelete").show().html();
								/* comments+="<a href=buyboard.do?command=deleteComment&no="
										+commentsVO.no+"&bno="+bno+">삭제</a></td></tr>"; */
								comments+="</div></td></tr>";
							}else{
								comments+="</div></td></tr>";
							}
							comments+="<tr><td colspan=2>"+commentsVO.comment+"<hr></td></tr>";			
				});//each
				$("#buyCommentTbody").html(comments);// tbody에 접근한후 append(comments);
 			}//success
		});//ajax

	//댓글 쓰기
		$("#buyAddCommentBtn").click(function(){
		//alert($("#buyAddForm").serialize());
		if($("#buy_comment").val()!=""){
			 $.ajax({
					type:"POST",
					url:"${initParam.root}buyboard.do?command=registerComment",
					data:"comment="+$("#buy_comment").val()
							+"&buyBoardVO.no=${requestScope.bvo.no }"
							+"&buyBoardVO.level=${requestScope.bvo.level}", 
					success:function(data){
						var comments="";
						var commentsVO =data.bcvo;
						var commentId = commentsVO.memberVO.id;
						comments+="<tr><td><b>"+commentsVO.memberVO.id+
								"</b></td><td>"+commentsVO.timePosted+
								"&nbsp;"; /* <img src=img/reply.jpg><a href=>답글</a>"; */
								if(currentId==commentId){
									comments+="<div style=float:right;>";
									/* comments+="<a href=>수정</a> "; */
									comments+="<img src='img/reply_deleteBtn.gif' name='delBuyCommentBtn'>";
									comments+="<input type='hidden' name='no' value='"+commentsVO.no+"'>";
									comments+="</div></td></tr>";
									//안되는 예시
									//<a href=Javascript:$('deleteBuyComment').click()>삭제</a>
									/* comments+="<span id='deleteBuyComment'>삭제</span></td></tr>"; */
									/* <a href=buyboard.do?command=deleteComment&no="
											+commentsVO.no+"&bno="+bno+">삭제</a> */
								}else{
									comments+="</div></td></tr>";
								}
								comments+="<tr><td colspan=2>"+commentsVO.comment+"<hr></td></tr>";		
						$("#buyCommentTbody").append(comments);
						$("#buy_comment").val("");
			 		return false;
					}//success
			});//ajax	
		}//if
	}); //click 
			
	//댓글 삭제
	$("#buyCommentTbody").on("click","img[name='delBuyCommentBtn']",function(){ //each문을 쓰니 삭제버튼의 id가 겹쳐서 on으로 묶어 이벤트 처리!																							
		var bcno=$(this).next().val();
		$.ajax({
			type:"POST",
			url:"${initParam.root}buyboard.do",
			data:"command=deleteComment&no="+bcno+"&bno="+bno,
			dataType:"json",
			success:function(data){
				var comments="";
				$.each(data.comList,function(index, commentsVO){
				 		var commentId = commentsVO.memberVO.id;
						comments+="<tr><td><b>"+commentsVO.memberVO.id+
								"</b></td><td>"+commentsVO.timePosted+
								"&nbsp;"; /* <img src=img/reply.jpg><a href=>답글</a>"; */
								if(currentId==commentId){
									comments+="<div style='float:right'>";
									/* comments+="<img src='img/reply_updateBtn.gif' name='updateBuyCommentBtn'>"; */
									comments+="<img src='img/reply_deleteBtn.gif' name='delBuyCommentBtn'>";
									comments+="<input type='hidden' name='no' value='"+commentsVO.no+"'>";
									comments+="</div></td></tr>";
								}else{
									comments+="</div></td></tr>";
								}
								comments+="<tr><td colspan=2>"+commentsVO.comment+"<hr></td></tr>";			
					});//each
				$("#buyCommentTbody").html(comments);
			}//success
		});//ajax
	}); // on method
	
	 $("#updateBtn").click(function(){
	if(${sessionScope.userInfo.id != requestScope.bvo.memberVO.id }){
		alert("본인 글만 수정할 수 있습니다");
		return false;
	}else{
		if(confirm("게시글을 수정하시겠습니까?")){
			var nodata =${requestScope.bvo.no };
			location.href = "${initParam.root}buyboard.do?command=goUpdateView&no="+nodata;
		}else{
			return false;
		}
	}
		}); //click
	$("#deleteBtn").click(function() {
		if(${(sessionScope.userInfo.id != requestScope.bvo.memberVO.id) && (sessionScope.userInfo.grade != "admin")}){
			alert("본인 게시물만 삭제 가능합니다");
			return false;
		}else{
			if(confirm("게시글을 삭제 하시겠습니까?")){
				var delno = ${requestScope.bvo.no };
				location.href = "${initParam.root}buyboard.do?command=deleteConetent&no="+delno;
			}else{
				return false;
			}
		}
	}); //click
});//ready
	</script>
		<br>
		<table border="1" style="border-color: #DCEBFF;">
			<tr>
				<td colspan="2"><b><font size="5px">${requestScope.bvo.title
							}</font></b></td>
			</tr>
			<tr>
				<td>글쓴이: ${requestScope.bvo.memberVO.name
					}(${requestScope.bvo.memberVO.id }) &nbsp;</td>
				<td>조회수: ${requestScope.bvo.hits } &nbsp;</td>
			</tr>
			<tr>
				<td>시간: ${requestScope.bvo.timePosted } &nbsp;</td>
				<td>e-mail : ${requestScope.bvo.memberVO.email }</td>
			</tr>
			<tr>
				<td>상품명 : ${requestScope.bvo.goods } &nbsp;</td>
				<td>거래지역 : ${requestScope.bvo.tradeArea } &nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><textarea rows="15px" cols="70px" readonly
						style="width: 700px">${requestScope.bvo.content}</textarea></td>
			</tr>
		</table>
		<br>
		<a
			href="${initParam.root}buyboard.do?command=getContentList&nowPage=1"><img
			alt="목록" border="0" src="img/list_btn.jpg"></a>
			
			<c:if test="${(sessionScope.userInfo.id==requestScope.bvo.memberVO.id) || (sessionScope.userInfo.grade=='admin')}">
				<a href="Javascript:$('deleteBtn').click()"><img src="img/delete_btn.jpg" id="deleteBtn"></a>
			</c:if>
			<c:if test="${(sessionScope.userInfo.id==requestScope.bvo.memberVO.id)}">
				<a href="Javascript:$('updateBtn').click()"><img src="img/modify_btn.jpg" id="updateBtn"></a>
			</c:if>
		<br>
		<!-- 댓글 div -->
		<div id="commentDiv" style="background-color: #dcdcdc; width: 712px;">
			<!-- 댓글 목록이 출력될 영역 -->
			<div id="buyCommentList">
				<!-- table 생성 <tbody> -->
				<table id="buyCommentTable">
					<tbody id="buyCommentTbody">

					</tbody>
				</table>
			</div>

			<!-- 댓글 입력 폼 -->
			<div id="buyCommentAdd">
				<form action="${initParam.root}buyboard.do" name="buyAddForm"
					id="buyAddForm" method="post">
					<input type="hidden" name="command" value="registerComment">
					<textarea name="comment" style="width: 520px; height: 60px;"
						id="buy_comment"></textarea>
					<a href="Javascript:$('buyAddCommentBtn').click()"><img
						src="img/btn-reply.gif" id="buyAddCommentBtn"></a> <br> <br>
				</form>
			</div>
		</div>
		<!-- 댓글 수정 폼 -->
		<!-- style="display: none" 으로 함으로써 처음에는 수정 폼이 보이지 않게 된다. -->
		<div id="buyCommentUpdate" style="display: none">
			<form action="" name="updateForm">
				<input type="hidden" name="id" value="" /> 내용:
				<textarea name="content" cols="50px" rows="5px"></textarea>
				<br /> <input type="button" value="등록" id="buyUpdateCommentBtn" />
				<input type="button" value="취소" id="buyCancelUpdateBtn" />
			</form>
		</div>

	</c:when>
	<c:otherwise>
		<script type="text/javascript">
		location.href="${initParam.root}view/index.jsp";
	</script>
	</c:otherwise>
</c:choose>
